<template>
	<!-- 商品分类 -->
	<view class="categoryAllContainer">
		<searchInput/>
		<view class="categoryContainer">
			<!-- 左侧菜单 -->
			<scroll-view scroll-y class="common menuList" >
				<view v-for="(item,index) in menuList" :class="[ index == currentIndex ? 'active' : '' ]" @click="switchGoods" :data-index="index" :key="index">{{item}}</view>
			</scroll-view>
			<!-- 右侧内容 -->
			<scroll-view scroll-y="true" class="common contentArea"  :scroll-top="scrollTop" @scroll="scroll">
				<view class="contentList" v-for="item1 in contentList" :key="item1.cat_id">
					<view class="goodsTitle">*{{item1.cat_name}}*</view>
					<view class="goodsList">
						<navigator class="goodsPer" hover-class=none  v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goodsList/goodsList?cid='+item2.cat_id">
							<image :src="item2.cat_icon" mode="widthFix"></image>
							<view>{{item2.cat_name}}</view>
						</navigator>
					</view>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {request} from '../../static/utils/request.js'
	import searchInput from '../../component/searchInput.vue'
	
	export default {
		data() {
			return {
				allData:[],			//
				menuList:[],		//左侧菜单数据
				contentList:[],		//右侧内容数据
				currentIndex:0,		//点击内容索引
				scrollTop:0			//这是切换后内容置顶开始
			}
		},
		onLoad(){
			// 先判断本地中有无数据，减少请求
			const catesData = wx.getStorageSync("catesData")
			if(!catesData){
				this.getCategoriesData()
			}else if(Date.now() - catesData.time > 10000*10){		//判断数据有效时间
				this.getCategoriesData()
			}else{
				this.allData = catesData.data
				this.setCatesData()
			}
			
		},
		methods: {
			// 获取分类数据
			async getCategoriesData(){
				request('/categories').then(res=>{
					this.allData = res.data.message
					// 存储数据
					uni.setStorageSync("catesData",{time:Date.now(),data:this.allData})
					// console.log(this.allData)
					// 将所有数据分类提取出来
					this.setCatesData()
					
				})
			},
			// 设置并分类数据
			setCatesData(){
				let menuListData = this.allData.map( item => item.cat_name)
				this.menuList = menuListData
				this.contentList = this.allData[0].children
			},
			switchGoods(e){
				let index = e.currentTarget.dataset.index
				// console.log(e,index)
				this.currentIndex = index
				this.contentList =  this.allData[index].children
				this.scrollTop = 0			//
			},
			scroll: function(e) {  			//当重复设置某些属性为相同的值时，不会同步到view层。记录滚动数据，因为在scroll中只有数据变动才能更新视图使属性生效
				this.scrollTop = e.detail.scrollTop
			},
			// fd(delay,callback){
			// 	let timer
			// 	return function(){
			// 		clearTimeout(timer)
			// 		timer = setTimeout(function(){
			// 			callback()
			// 		},delay)
			// 	}
			// }
		},
		components:{
			searchInput
		}
	}
</script>

<style lang="scss">
	page{
		// 隐藏scroll滚动条
		::-webkit-scrollbar{
			display: none;
		}
		background-color: #ebebeb;
		.categoryAllContainer{
			width: 100%;
			.categoryContainer{
				width: 96%;
				// #ifdef H5
				height: calc(100vh - 320upx);
				// #endif
				
				// #ifdef MP-WEIXIN
				height: 88vh;
				// #endif
				
				margin: 20upx auto;
				display: flex;
				justify-content: space-between;
				// background-color: #fff;
				// border-radius: 16upx;
					
				.common{
					height: 100%;
					font-size: 30upx;
					text-align: center;
					background-color: #fff;
					border-radius: 16upx;
					overflow: hidden;
					
				}
				.menuList{
					width: 30%;
					view{
						height: 80upx;
						line-height: 80upx;
						border-bottom: 1upx solid #ebebeb ;
					}
					view:last-child{
						border: none;
					}
					.active{
						color: red;
						border-left: 5upx solid red;
					}
				}
				.contentArea{
					width: 68%;
					.contentList{
						.goodsTitle{
							height: 80upx;
							line-height: 80upx;
							margin: 30upx 0;
						}
						.goodsList{
							display: flex;
							flex-wrap: wrap;
							text-align: center;
							font-size: 20upx;
							
							.goodsPer{
								width: 33.33%;
								image{
									width: 80%;	
								}
							}
						}
						
					}
				}
			}
		}
		
	}
</style>
